<template>
	<view class="body">
		<view class="cultural-product-box">
			<view class="box-first" v-for="(item, i) in culturalProductList" :key="i"> 
				<block v-if="i % 2 === 0">
					<view class="title">{{item.culturalProductName}}</view>
					<view class="content-box-left">
						<view class="img">
							<image :src="item.culturalProductImg" mode=""></image>
						</view>
						<view class="content">
							{{item.culturalProductContent}}
						</view>
					</view>
				</block>
				
				<block v-else>
					<view class="content-box-right">
						<view class="img">
							<image :src="item.culturalProductImg" mode=""></image>
						</view>	
						<view class="content">
							{{item.culturalProductContent}}
						</view>
					</view>
					<view class="title">{{item.culturalProductName}}</view>
				</block>
			</view>
			<!-- <view class="box-second" v-for="(item, i) in culturalProductListRight" :key="i">
				<view class="content-box-right">
					<view class="img">
						<image :src=item.culturalProductImg mode=""></image>
					</view>	
					<view class="content">
						{{item.culturalProductContent}}
					</view>
				</view>
				<view class="title">{{item.culturalProductName}}</view>
			</view> -->
			<!-- <view class="box-third">
				<view class="title">百变鸮小多功能手机支架</view>
				<view class="content-box-left">
					<view class="img">
						<image src="http://8.138.83.48:9000/library/cultural/product3.png" mode=""></image>
					</view>
					<view class="content">
						此款产品以广钢新城AF040234地块M4出土的陶鸮形五联罐为设计原型，这件器物以独特而生动的造型在我院（馆）举办的展览中获得了大量观众的喜爱与关注。设计选取了造型更具特色的“鸮首”作为原型，表现出拟人化的不同性格，外表皮肤与装饰也会根据性格与情绪的不同产生变化。设计抓住文物的器型构造与特征，对器物通身的叶脉纹进行高度概括提取，将鸮首头顶的凤鸟造型进行了艺术化处理。
					</view>
				</view>
			</view>
			<view class="box-fourth">
				<view class="content-box-right">
					<view class="img">
						<image src="http://8.138.83.48:9000/library/cultural/product4.png" mode=""></image>
					</view>
					<view class="content">
						这款“花卉纹饰”徽章套盒选取青釉褐彩盆、彩绘蝴蝶花卉纹花口瓷盘、牡丹纹瓦当、青花釉里红鹊鸟登梅纹盘等馆藏器物中“菊、荷、梅以及牡丹”等四种装饰性花卉纹饰进行徽章衍生设计。其设计初衷是想延续“菊、荷、梅、牡丹”所蕴含的精神物语，花卉纹饰的线条优美、形态饱满、各具姿态，既有装饰性趣味，又充满了浪漫的情调，能为生活平添一份情趣。
					</view>
				</view>
				<view class="title">“多彩四季”徽章套盒</view>
			</view>
			<view class="box-fifth">
					<view class="title">黄釉莲花纹纸胶带</view>
				<view class="content-box-left">
					<view class="img">
						<image src="http://8.138.83.48:9000/library/cultural/product5.png" mode=""></image>
					</view>
					<view class="content">
						此款胶带的设计原型是2003年广州市中山四路致美斋工地出土的“黄釉莲花纹铺地方砖”，设计保留了方砖整体造型与纹饰，莲蓬、莲花主、次瓣层层叠加，四角用折菊纹点缀，构成完整的中心对称性图案，图案用传统的莫兰迪色系进行分割、重复、演变，形成良好的视觉冲击效果，透着古朴的美感，可用于手账本、彩妆壳盒等表皮装饰。
					</view>
				</view>
			</view>
			<view class="box-sixth">
				<view class="content-box-right">
					<view class="img">
						<image src="http://8.138.83.48:9000/library/cultural/product6.png" mode=""></image>
					</view>
					<view class="content">
						这款“鸾凤和鸣”丝巾的设计提取了青瓷双凤纹器盖（宋，中山六路RJ-6/7地块出土）上的“双凤纹”作为创意设计元素，“凤纹”自原始彩陶上的玄鸟演变而来，常见于建筑构件及器物的装饰性纹饰中，在我国古代社会的传统意识形态中象征着较高的等级与地位，其纹饰蕴含了“吉祥、高贵、浪漫”等寓意，所以在设计的过程中完整保留纹饰原本的形态，并选用器物局部的纹饰进行叠加点缀，使产品的视觉层次感更为丰富。
					</view>
				</view>
				<view class="title">“鸾凤和鸣”丝巾</view>
			</view> -->
		
		 </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				culturalProductList: []
			};
		},
		methods: {
			async getculturalProductList() {
				const {data: res} = await uni.$http.get('/culturalproduct/list')
				if(res.msg !== 'success') return uni.$showMsg("获取文创产品数据失败")
				// console.log("获取的文创产品：", res)
				this.culturalProductList = res.page.list
			}
		},
		onLoad() {
			this.getculturalProductList()
		}
	}
</script>

<style lang="scss">
.body {
	.cultural-product-box {
		.title {
				font-weight: bold;
		}
		.content-box-left {
			display: flex;
			flex-direction: column;
			margin-left: 10px;
			.img {
				display: flex;
				justify-content: center;
				
				image {
					height: 150px;
					width: 300px;
					border-radius: 10%;
				}
			}
			.content {
				padding-top: 5px;
			}
		}
		.content-box-right {
			display: flex;
			flex-direction: column;
			margin-right: 10px;
			.img {
				display: flex;
				justify-content: center;
				
				image {
					height: 150px;
					width: 300px;
					border-radius: 10%;
				}
			}
			.content {
				// padding-left: 10px;
				padding-top: 5px;
			}
		}
		.box-first {
			margin: 20px; 
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 15px;
			
		}
		.box-second {
			margin: 20px;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 15px;
		}
		.box-third {
			margin: 20px;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 15px;
		}
		.box-fourth {
			margin: 20px;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 15px;
		}
		.box-fifth {
			margin: 20px;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 15px;
		}
		.box-sixth {
			margin: 20px;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 15px;
		}
	}
}
</style>
